<template>
  <GlobalContainer className="!bg-[#F3F3F3]" :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="报事报修" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="relative mx-auto mt-30 h-200 w-648">
      <image :src="`${OSS_URL}/images/baoxiu/home_bg.png`" class="absolute left-0 top-0 size-full" />
      <div class="absolute left-0 top-0 w-full px-38 pb-32 pt-50 text-white">
        <div class="line1 text-34 leading-50">{{ accountStore.roomInfo }}</div>
        <div class="line2 mt-16 font-normal">
          <div class="flex items-center text-30 leading-46">
            <span class="mr-20">{{ userInfo.realName || userInfo.userName }}</span>
            <span>{{ userInfo.phone }}</span>
            <!-- <div class="btn ml-auto">切换房屋</div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="relative mx-auto h-547 w-702">
      <image :src="`${OSS_URL}/images/baoxiu/box_bg.png`" class="absolute left-0 top-0 size-full" />
      <div class="absolute left-0 top-0 size-full">
        <div class="flex flex-col">
          <div class="title h-104 pl-32 text-34 leading-104">您要选择的类型是？</div>
          <div class="w-full flex-1 bg-white px-32 py-36">
            <div class="type-c flex items-center gap-32">
              <div
                class="type-item relative flex h-200 w-192 flex-col justify-center"
                v-for="item in typeLst"
                :key="item.title"
                @tap.stop="toPathHandle(item.path)"
              >
                <image :src="item.bgImg" class="absolute left-0 top-0 size-full" />
                <image :src="item.icon" class="absolute left-30 top-116 size-36" />
                <div class="z-10 absolute top-32 w-full text-center text-30 leading-46 text-[#303133]">{{ item.title }}</div>
              </div>
              <!-- <div class="type-item relative flex h-200 w-192 flex-col justify-center">
                <image src="../../static/images/baoxiu/gonggong_bg.png" class="absolute left-0 top-0 size-full" />
                <image src="../../static/images/baoxiu/gonggong_icon.png" class="absolute left-30 top-116 size-36" />
                <div class="absolute top-32 z-[10] w-full text-center text-30 leading-46 text-[#303133]">公共报事</div>
              </div>
              <div class="type-item relative flex h-200 w-192 flex-col justify-center">
                <image src="../../static/images/baoxiu/xingfu_bg.png" class="absolute left-0 top-0 size-full" />
                <image src="../../static/images/baoxiu/xingfu_icon.png" class="absolute left-30 top-116 size-36" />
                <div class="absolute top-32 z-[10] w-full text-center text-30 leading-46 text-[#303133]">幸福随手拍</div>
              </div> -->
            </div>

            <div class="mt-32">
              <div class="flex items-center text-32 font-bold leading-44 text-[#1E2E4C]">
                <span>友情</span>
                <span class="text-[#15B27E]">提示</span>
              </div>
              <div class="mt-20 text-26 leading-40 text-[#909399]">部分报修可能会产生一定的成本费用，在工作人员上门服务时和您确认！</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="log-cell flex items-center px-32 py-30" @tap.stop="toPathHandle('baoxiuLog/index')">
      <image src="../../static/images/baoxiu/file_icon.png" class="mr-16 size-36" />
      <span class="text-30 leading-46 text-[#303133]">历史工单</span>
      <image src="../../static/images/baoxiu/right_icon.png" class="ml-auto size-32" />
    </div>
  </GlobalContainer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAccountStore } from '@/store'

const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
const userInfo = computed(() => accountStore.userInfo)

const typeLst = [
  {
    bgImg: `${OSS_URL}/images/baoxiu/jujia_bg.png`,
    icon: `${OSS_URL}/images/baoxiu/jujia_icon.png`,
    title: '居家报修',
    path: 'jujiabaoxiu/index'
  },
  {
    bgImg: `${OSS_URL}/images/baoxiu/gonggong_bg.png`,
    icon: `${OSS_URL}/images/baoxiu/gonggong_icon.png`,
    title: '公共报事',
    path: 'gonggongbaoshi/index'
  },
  {
    bgImg: `${OSS_URL}/images/baoxiu/xingfu_bg.png`,
    icon: `${OSS_URL}/images/baoxiu/xingfu_icon.png`,
    title: '幸福随手拍',
    path: 'xingfusuishoupai/index'
  }
]

const toPathHandle = (path: string) => {
  uni.navigateTo({
    url: `/subPages/${path}`
  })
}
</script>
<style lang="scss" scoped>
.line2 {
  .btn {
    width: 152rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1px solid #ffffff;
    font-size: 28rpx;
    color: #008055;
  }
}

.log-cell {
  width: 702rpx;
  height: 105rpx;
  margin: 0 auto;
  margin-top: 32rpx;
  background: #fcfeff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  border: 1px solid #ffffff;
}
</style>
